<template>
    <div>
       <main-layout>
         <template v-slot:top>
           <el-form ref="searchForm" :inline="true" :model="searchInfo">

            <el-form-item label="时间">
                <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间" value-format="YYYY-MM-DD" :clearable="false"/>
            </el-form-item>
             
             <el-form-item>
               <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
               <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
             </el-form-item>
           </el-form>
         </template>
   
         <c-table ref="tableRef" :page="{ pageSize, pageIndex, total }" :lists="tableData" @current-change="handleCurrentChange"
           @size-change="handleSizeChange" :loading="loading" :sequence="false" @selection-change="selectionChange" rowKey="id" selectKey='id'>
           <el-table-column align="left" label="名称" prop="name" />
           <el-table-column align="center" label="销量" prop="saleQuantity" />
           <el-table-column align="center" label="销售金额" prop="saleAmount">
            <template #default="scope">
              <span>¥{{ scope.row.saleAmount }}</span>
            </template>
           </el-table-column>
           
         </c-table>
       </main-layout>
     </div>
   </template>
   
   <script setup>
   import { ref,onMounted } from 'vue'
   import moment from 'moment'
   import {getStatistics} from '@/api/goods'
   
   import mainLayout from '@/components/custom/mainLayout.vue'
   import cTable from '@/components/custom/cTable.vue'
   
   import { useUserStore } from '@/pinia/modules/user'

   import {formatDateLong} from '@/utils/format'
 
   const userStore = useUserStore()
   
   const pageIndex = ref(1)
   const total = ref(0)
   const pageSize = ref(10)
   const tableData = ref([])
   const searchInfo = ref({})
   const loading = ref(true)

   const tableRef = ref(null)
   const time = ref('')
 
   onMounted(()=>{
    let yesterday = moment().add('days',-1).format('YYYY-MM-DD')
    time.value = [`${yesterday} 00:00:00`,`${yesterday} 23:59:59`]
     getTableData()
   })
   
   const onReset = () => {
     searchInfo.value = {}
     time.value = ''
   }
   // 搜索
   const onSubmit = () => {
     pageIndex.value = 1
     tableRef.value.clear_selection()  // 清空所选
     getTableData()
   }
   // 分页
   const handleSizeChange = (val) => {
     pageIndex.value = 1
     pageSize.value = val
     getTableData()
   }
   
   const handleCurrentChange = (val) => {
     pageIndex.value = val
     getTableData()
   }
   
   // 查询
   const getTableData = async () => {
     if(time.value){
       searchInfo.value.dataDateStart = time.value[0]
       searchInfo.value.dataDateEnd = time.value[1]
     }
     const res = await getStatistics({ 
         pageNumber: pageIndex.value, 
         pageSize: pageSize.value, 
         dataType:3, // 1.会员销量统计；2.服务站销量统计；3.商品销量统计
         ...searchInfo.value 
     })
     if (res.code == 0) {
       tableData.value = res.data.list
       total.value = res.data.total
     }
     loading.value = false
   }
   
 
   
   </script>
   
   <style lang="scss" scoped>
   .inputLine {
     display: flex;
     width: 200px;
     .zhi{
       padding: 0 10px;
     }
     s{
       font-style: normal;
       text-decoration: none;
       padding: 0 0 0 5px;
       color: var(--el-text-color-regular);
     }
   }
   </style>
   